var A = function(selector, context){
	return new A.fn.init(selector, context);
}
A.fn = A.prototype = {
	constructor : A,
	// context = context || document;
	init : function(selector, context){
	if(~selector.indexOf('#')){
		this[0] = document.getElementById(selector.slice(1));
		this.length = 1;
	}else{
		var doms = context.getElementsByTagName(selector),
				i = 0,
				len = doms.length;
				for(; i<len; i++){
					this[i] = doms[i];
				}
				this.length = len;
	}
	this.context = context;
	this.selector = selector;
	return this;
	},
	push: [].push,
	sort: [].sort,
	splice: [].splice
}
A.fn.init.prototype = A.fn;

A.extend = A.fn.extend = function(){
	var i = 1,
		len = arguments.length,
		target = arguments[0],
		j;
		if(i == len){
			target = this;
			i--;
		}
		for(; i<len; i++){
			for(j in arguments[i]){
				target[j] = arguments[i][j];
			}
		}
		return target;
}

A.fn.extend({
	on : (function(){
		if(document.addEventListener){
			return function(type, fn){
				var i = this.length - 1;
				for(; i>=0; i--){
					this[i].addEventListener(type, fn, false);
				}
				return this;
		  	}
			}else if(document.attachEvent){
				return function(type, fn){
					var i = this.length - 1;
					for(; i>=0; i--){
						this[i].addEvent('on' + type, fn);
					}
					return this;
				}
			}else{
				return function(type, fn){
					var i = this.length - 1;
					for(; i>=0; i--){
						this[i]['on' + type] = fn;
					}
					return this;
				}
		}
	})()
})



var throttle = function(){
	var isClear = arguments[0], fn;
	if(typeof isClear === 'boolean'){
		fn = arguments[1];
		fn._throttleID && clearTimeout(fn._throttleID);
	}else{
		fn = isClear;
		param = arguments[1];
		var p = extend({
			context : null,
			args : [],
			time : 300
		}, param);
		arguments.callee(true, fn);
		fn._throttleID + setTimeout(function(){
			fn.apply(p.context, p.args)
		}, p.time)
	}
}

function $(id){return document.getElementById(id)}
function $tag(tag, container){
	container = container || document;
	return container.getElementsByTagName(tag)
}
var Layer = function(id){
	this.container = $(id);
	this.layer = $tag('div', this.container)[0];
	this.lis = $tag('li', this.container);
	this.imgs = $tag('img', this.container);
	this.bindEvent();
}
Layer.prototype = {
	bindEvent : function(){
		var that = this;
		function hideLayer(){
			that.layer.className = '';
		}
		function showLayer(){
			that.layer.className = 'show';
		}
		that.on(that.container, 'mouseenter', function(){
			throttle(true, hideLayer);
			throttle(showLayer);
		}).on(that.container, 'mouseleave', function(){
			throttle(hideLayer);
			throttle(true, showLayer);
		});
		for(var i = 0; i < that.lis.length; i++){
			that.lis[i].index = i;
			that.on(that.lis[i], 'mouseenter', function(){
				var index = this.index;
				for(var i = 0; i < that.imgs.length; i++){
					that.imgs[i].className = '';
				}
					that.imgs[i].className = 'show';
					that.layer.style.left = -22 + 60 * index + 'px';
			})
		}
	},
	on : function(ele, type, fn){
		ele.addEventListener ? ele.addEventListener(type, fn, false) : ele.attachEvent('on' + type, fn);
		return this;
	}
}

/****
 * 节流延迟加载图片类
 * param id 延迟加载图片的容器id
 * 注：图片格式如下 <img src="img/loading.gif" alt="" data-src="img/1.jpg">
 ****/
 function LazyLoad(id){
 	this.container = document.getElementById(id);
 	this.imgs = this.getImgs();
 	this.init();
 }
 LazyLoad.prototype = {
 	init : function(){
 		this.update();
 		this.bindEvent();
 	},
 	getImgs : function(){
 		var arr= [];
 		var imgs = this.container.getElementsByTagName('img');
 		for(var i = 0, len = imgs.length; i < len; i++){
 			arr.push(imgs[i])
 		}
 		return arr;
 	},
 	update : function(){
 		if(!this.imgs.length){
 			return;
 		}
 		var i = this.imgs.length;
 		for(--i; i >= 0; i--){
 			if(this.shouldShow(i)){
 				this.imgs[i].src = this.imgs[i].getAttribute('data-src');
 				this.imgs.splice(i, 1);
 			}
 		}
 	},
 	shouldShow : function(i){
 		var img = this.imgs[i],
 			scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
 			scrollBottom = scrollTop + document.documentElement.clientHeight;
 			imgTop = this.pageY(img),
 			imgBottom = imgTop + img.offsetHeight;
 			if(imgBottom > scrollTop && imgBottom < scrollBottom || (imgTop > scrollTop && imgTop < scrollBottom)){
 				return true;
 			}else{
 				return false;
 				}
 			
 	},
 	pageY : function(element){
 		if(element.offsetParent){
 				return element.offsetTop + this.pageY(element.offsetParent);
 			}else{
 				return element.offsetTop;
 			}
 	},
 	on : function(element, type, fn){
 		if(element.addEventListener){
 			addEventListener(type, fn, false);
 		}else{
 			element.attachEvent('on' + type, fn, false);
 		}
 	},
 	bindEvent : function(){
 		var that = this;
 		this.on(window, 'resize', function(){
 			throttle(that.update, {context : that});
 		});
 		this.on(window, 'scroll', function(){
 			throttle(that.update, {context : that});
 		})
 	}
 }

 new LazyLoad('container');

 var LogPack = function(){
 	var data = [],
 			MaxNum = 10,
 			itemSplitStr = '|',
 			keyValueSplitStr = '*',
 			img = new Image();
 			function sendLog(){}
 			return function(param){
 				if(!param){
 					sendLog();
 					return;
 				}
 				data.push(param);
 				data.length >= MaxNum && sendLog();
 			}
 }();

 function sendLog(){
 	var logStr = '';
 		  fireData = data.splice(0, MaxNum);
 		  for(var i = 0, len = fireData.length; i < len; i++){
 		  	logStr += 'log' + i + '=';
 		  	for(var j in fireData[i]){
 		  		logStr += j + keyValueSplitStr + fireData[i][j];
 		  		logStr += itemSplitStr;
 		  	}
 		  	logStr = logStr.replace(/\|$/, '') + '&';
 		  }
 		  logStr += 'logLength=' + len;
 		  img.src = 'a.gif?' + logStr;
 }

 btn.onclick = function(){
 	logPack({
 		btnId : this.id,
 		context : this.innerHTML,
 		type : 'click'
 	});
 };

 btn.onmouseover = function(){
 	LogPack({
 		btnId : this.id,
 		context : this.innerHTML,
 		type : 'mouseover'
 	});
 };